import React, {} from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  TouchableOpacity,
  Platform,
  Image,
  Text,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import JumpToPageByUrlAction from '../../actions/common/JumpToPageByUrlAction';
import CommonRequestSliderImagesAction from '../../actions/common/CommonRequestSliderImagesAction';
import TImage from '../../components/TImage';

import BaseComponent from './BaseComponent';

const MIN_COUNT = 1;

export default class CommonViewPagerOne extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      bannerImages: [{image_url:{uri:""}, isDefault:true},
        {image_url:{uri:""}, isDefault:true}],
      data: [],
      currentIndex:0,
    }

    this._imageWidth = this.props.style.width;
    this._imageHeight = this.props.style.height;
    console.log("this._imageWidth", this._imageWidth);
    console.log("this._imageHeight", this._imageHeight);
  }

  componentWillUpdate(nextProps, nextState) {
    if(this.state.data != nextState.data) {
      var images = Array.from(nextState.data);
      while (images.length < MIN_COUNT) {
        images.push({image_url:{uri:""}, isDefault:true});
      }
      this.setState({
        bannerImages:images,
      })
    }
  }

  componentDidMount() {
    this.initTimer = setTimeout(
      () => {
        // this._requestData();
      },
      500
    );
  }

  render() {
    return (
      <View style={{width:this._imageWidth,
          height:this._imageHeight + SizeUtils.translateDesignHeightToCode(30)}}>
        <View>
          <ScrollView style={{width:this._imageWidth,
              height:this._imageHeight}}
            horizontal={true}   // 水平方向
            showsHorizontalScrollIndicator={false}  // 水平指示器
            showsVerticalScrollIndicator={false}    // 垂直指示器
            pagingEnabled={true}    // 开启分页功能
            alwaysBounceHorizontal={false} //弹性拉动一截
            onScroll={this._onScroll.bind(this)}
             onTouchStart={this.onTouchStart.bind(this)}
             onScrollEndDrag={this.onTouchEnd.bind(this)}
          >
              {this._renderItems()}
          </ScrollView>
        </View>
        {/* {this._renderProgressView()} */}
      </View>)
  }

  doRefresh() {
    this._requestData();
  }

  onTouchStart(){
    if(this.props.home && Platform.OS === "android" && this.props.home.setHorizontalDisable){
      this.props.home.setHorizontalDisable();
    }
  }

  onTouchEnd(){
    if(this.props.home&&Platform.OS === "android"&& this.props.home.setHorizontalEnable){

      this.props.home.setHorizontalEnable();

    }
  }



  _onScroll(event){
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.floor(x / this._imageWidth);
    if(this.state.currentIndex != index) {
      this.setState({
        currentIndex:index,
      })
    }
  }

  _renderProgressView() {
    return (
      <View style={{width:this._imageWidth, height:SizeUtils.translateDesignHeightToCode(10),
          justifyContent:"center", alignItems:"center", paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
        <View style={{width:SizeUtils.translateDesignWidthToCode(50 * this.state.bannerImages.length + 20 * (this.state.bannerImages.length - 1)),
          flexDirection:"row", justifyContent:"space-around", alignItems:"center",}}>
          {this.state.bannerImages.map((data, index) => {
            return this._renderProgress(data, index);
          })}
        </View>
      </View>
    )
  }

  _renderProgress(data, index) {
    return (
      <View key={index} style={{width:SizeUtils.translateDesignWidthToCode(50), height:SizeUtils.translateDesignHeightToCode(10),
        backgroundColor:this.state.currentIndex == index ? "#4581fa" : "#cccccc"}}>
      </View>
    )
  }

  _requestData() {
    new CommonRequestSliderImagesAction().call(this, {tag:this.props.type});
  }

  _renderItems() {
    return this.state.bannerImages.map((data, index) => {
      return this._renderPage(data, index);
    })
  }

  //轮播图片
  _renderPage(data, index) {
    var source = null;
    if(data.isDefault) {
      // source = "";
      source = data.image_url;
    }
    else {
      source = {uri: data.image_url};
    }
    return (
      <View key={index} style = {{height:this._imageHeight,
          width:this._imageWidth,
          backgroundColor:"#00000000",}}>
        <View style={{width:this._imageWidth, height:this._imageHeight,
            backgroundColor:"#eff1ff", justifyContent:"center", alignItems:"center"}}>
          <TouchableOpacity onPress = {() => {this._onPressImage(data)}}>
            {
              this.props.isMain?
              <Image source = {source} resizeMode={'cover'} style = {{height:SizeUtils.translateDesignWidthToCode(320), width:this._imageWidth}}/>:
              <TImage
                source = {source}
                style = {{height:this._imageHeight, width:this._imageWidth}}
                translatedSize = {true}
                showDefault = {true}
                isMini = {true}
                miniSize = {"mini300_q100"}
              />
            }
            
          </TouchableOpacity>
          {
            this.props.isMain?null:
            <View style={{width:this._imageWidth, backgroundColor:"#00000033",bottom:SizeUtils.translateDesignWidthToCode(0),
                position:"absolute"}}>
              <Text style={{color:"#ffffff", fontSize:SizeUtils.translateFontSizeToCode(34),
                shadowColor:"#000000", shadowOffset:{x:3,y:3}, shadowOpacity:1,
                marginTop:SizeUtils.translateDesignHeightToCode(15),
                marginBottom:SizeUtils.translateDesignHeightToCode(15),
                shadowRadius:2, paddingLeft:SizeUtils.translateDesignWidthToCode(20), paddingRight:SizeUtils.translateDesignWidthToCode(20),
                textAlign:"center", fontWeight:"bold"}} numberOfLines={1}>
                {data.desc}
              </Text>
            </View>
          }
        </View>
      </View>
    )
  }

  _onPressImage(data) {
    new JumpToPageByUrlAction().call(this, data);
  }
}

const styles = StyleSheet.create({

});
